<!-- 停车场设备类别统计 -->
<template>
    <div class="w-100 h-100">
      <fakeLenfend
      v-if="showFakeLabel"
        :color="useOptions().colors.value.slice(0,echartsData.length)"
        :text="echartsData.map((item:any)=>item.label)"
      >
      </fakeLenfend>
  
      <div class="w-100" style="height: 90%">
        <div
          :id="echartsId"
          class="w-100"
          style="height: 100%; position: relative"
        ></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import fakeLenfend from "@/components/project/fakeLegend.vue";
  import { useOptions } from "@/hook/useOptions";
import { projectFunc } from "@/hook/projectFunc";
import { useFunc } from "@/hook/useFunc";
  const props = defineProps({
echartsData: {
 type: Array,
 default: () => [],
},
echartsId:{
 type: String,
 default: '',
},
colorChoose:{
 type: String,
 default:'',
},
xLabel:{
 type: Array,
 default: () => [],
},
showFakeLabel:{
  type: Boolean,
  default: true,
  
},
smooth:{
  type: Boolean,
  default: true,
},
unit:{
  type: String,
 default:'个',
}
});


  let option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(28,64,81,0.7)",
      
      borderColor: "transparent",
      textStyle: {
        color: "white",
        fontSize: 20,
      },
      // axisPointer: {
      //   lineStyle: {
      //     color: "rgb(126,199,255)",
      //   },
      // },
    },
  
    grid: {
      top: "5%",
      left: "10%",
      right: "5%",
      bottom: "20%",
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            lineStyle: {
                // color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            fontSize: 20,
            interval: 0,
            fontFamily: "OPPOSans-Regular",
            color: "rgba(108, 128, 151, 1)",
          },
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#233653",
          },
        },
     
        data: props.xLabel,
      },
    ],
    yAxis: [
      {
        name: "",

        // minInterval: 1,
        type: "value",
        splitLine: { // 配置分割线
            show: true,
            lineStyle: {
                color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#008de7",
          },
        },
        axisLabel: {
          show: true,
       
          formatter: function(value:any) {
                // 格式化标签，例如使用缩写
                return value + props.unit;
            },
        },
        axisTick: {
          show: false,
        },
      },
    ],

  };
let myChart:any=null

  onMounted(() => {
    (option as any).series=[]
    props.echartsData.forEach((item:any,index:any)=>{
        (option as any).series.push(   {
        name: item.label,
        type: "line",
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: props.smooth,
        lineStyle: {
          normal: {
            width: 3,
            color:props.colorChoose && props.colorChoose[index] ?props.colorChoose[index]:useOptions().colors.value[index], // 线条颜色
          },
        },
        
        itemStyle: {
          normal: {
            color: props.colorChoose && props.colorChoose[index] ?props.colorChoose[index]:useOptions().colors.value[index], //拐点颜色
            // borderColor: '#fff600',//拐点边框颜色
            // borderWidth: 13//拐点边框大小
            label: {
              show: true, //开启显示
              color: "#fff",
              position: "top", //在上方显示
              formatter: function (res: any) {
                if (res.value) {
                  return res.value;
                } else {
                  return 0;
                }
              },
            },
            areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                    offset: 0,
                    color: projectFunc().hexToRGBA( props.colorChoose && props.colorChoose[index] ?props.colorChoose[index]:useOptions().colors.value[index],1) // 颜色渐变起始颜色
                }, {
                    offset: 1,
                    color: projectFunc().hexToRGBA( props.colorChoose && props.colorChoose[index]?props.colorChoose[index]:useOptions().colors.value[index],0) // 颜色渐变起始颜色

                }])
            }
        }
          },
        },
        symbolSize: 8, //设定实心点的大小
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#00ffa230",
                },
                {
                  offset: 0.6,
                  color: "#00ffa220",
                },
                {
                  offset: 1,
                  color: "#00ffa210",
                },
              ],
              false
            ),
          },
        },
        data: item.value,
      },)

    })
    
     myChart = echarts.init(document.getElementById(props.echartsId) as HTMLElement);
      useFunc().setDefaultOption(myChart)
    myChart.setOption(option);
  });
  onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
  </script>
  
  <style></style>
  